<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">

    <title> weui picker二级联动</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.css"/>
    <style type="text/css">
        a{
            display: inline-block;
            margin-right: 20px;
        }
        #box{
            width: 120px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: #ccc;
            margin-left: 60px;
            margin-bottom: 50px;
            margin-top: 20px;
        }
        .timer{
            width: 120px;
            height: 50px;
            background-color:  #ccc;
            margin-left: 60px;
            line-height: 50px;
            text-align: center;
        }
        span{
            font-size: 15px;
            color: #CE3C39;
        }
    </style>
</head>
<body>

<a id="box">weui二级联动</a>  <span id="pickerBox"></span>
<a class="timer">weui-时间选择</a><span id="datepickerBox"></span>
<script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
<script type="text/javascript">
    var arr = [
        {
            label:'飞机票',
            value:0,
            children:[
                {
                    label:'经济舱',
                    value:1
                },
                {
                    label:'商务舱',
                    value:2
                },
                {
                    label:'头等舱',
                    value:3
                },
            ]
        },
        {
            label:'汽车票',
            value:1,
            children:[
                {
                    label:'快车',
                    value:1
                },
                {
                    label:'慢车',
                    value:2
                }
            ]
        },
        {
            label:'火车票',
            value:2,
            children:[
                {
                    label:'无座',
                    value:1
                },
                {
                    label:'有做',
                    value:2
                },
                {
                    label:'卧铺',
                    value:3
                },
            ]
        }
    ]

    document.getElementById('box').onclick=function(){
        weui.picker(
            arr,
            {
                onChange:function(res){
//                        console.log(res)
                },
                onConfirm:function(res){
                    var sonArr = arr[res[0]];
                    var index = arr.indexOf(sonArr);
                    console.log(index)
                    console.log(res[0])
                    console.log(arr[res[0]].label)
                    console.log(res[1])
                    var sonIndex = res[1]-1
                    console.log(arr[res[0]].children[sonIndex].label)
                    document.getElementById('pickerBox').innerHTML=arr[res[0]].label+'--'+arr[res[0]].children[sonIndex].label;
                }
            })
    }

    document.getElementsByClassName('timer')[0].onclick=function(){
        weui.datePicker({
            start:1990,
            end:2090,
            defaultValue:[2018,1,1],
            onChange:function(res){

            },
            onConfirm:function(res){
                console.log(res)
                document.getElementById('datepickerBox').innerHTML=res
            }
        })
    }
</script>
</body>
</html>